<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>远程指挥调度决策 - 浙政钉</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1890ff',
                        'gov-blue': '#2563eb',
                        'gov-green': '#059669',
                        'gov-red': '#dc2626'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <!-- 页面头部 -->
        <header class="bg-white shadow-sm sticky top-0 z-10">
            <div class="flex items-center justify-between p-4">
                <div class="flex items-center space-x-3">
                    <button onclick="goBack()" class="text-gray-600">
                        <i class="fas fa-arrow-left text-lg"></i>
                    </button>
                    <h1 class="text-lg font-semibold text-gray-800">远程指挥调度</h1>
                </div>
                <div class="flex items-center space-x-3">
                    <button onclick="showEmergencyMap()" class="text-gray-600">
                        <i class="fas fa-map text-lg"></i>
                    </button>
                    <div class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
                </div>
            </div>
        </header>

        <div class="p-4">
            <!-- 应急状态横幅 -->
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl p-4 mb-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-lg font-bold">应急指挥中心</h2>
                        <div class="flex items-center space-x-4 mt-2">
                            <div>
                                <span class="text-sm text-purple-100">当前状态：</span>
                                <span class="text-lg font-bold">待命</span>
                            </div>
                            <div>
                                <span class="text-sm text-purple-100">在线人员：</span>
                                <span class="text-lg font-bold">24</span>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                            <i class="fas fa-headset text-2xl"></i>
                        </div>
                        <p class="text-xs text-purple-100 mt-1">实时连接</p>
                    </div>
                </div>
            </div>

            <!-- 快速导航 -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="card cursor-pointer hover:shadow-lg" onclick="showQueryFunctionModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-search text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">信息查询</h3>
                        <p class="text-gray-500 text-sm mt-1">污染源、化学品、案例库</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showIncidentPointsModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">事故点管理</h3>
                        <p class="text-gray-500 text-sm mt-1">事故定位与导航</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showMonitoringPointsModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-map-marked-alt text-green-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">监测点位</h3>
                        <p class="text-gray-500 text-sm mt-1">监测点导航</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showDataTransmissionModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-upload text-orange-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">数据传输</h3>
                        <p class="text-gray-500 text-sm mt-1">监测数据上传</p>
                    </div>
                </div>
            </div>

            <!-- 当前任务 -->
            <div class="mb-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-base font-semibold text-gray-800">当前任务</h3>
                    <span class="text-sm text-gray-500">与电脑端同步</span>
                </div>
                <div class="space-y-3" id="currentTasks">
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-clock text-yellow-600"></i>
                                <span class="font-medium text-gray-800">待处理事故</span>
                            </div>
                            <span class="badge badge-warning">进行中</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">宁海县某某化工厂疑似废气泄漏，需要现场监测确认</p>
                        <div class="flex space-x-2">
                            <button onclick="navigateToIncident('incident1')" class="btn btn-warning text-sm px-3 py-1">
                                <i class="fas fa-map-marker-alt mr-1"></i>导航到现场
                            </button>
                            <button onclick="viewIncidentDetail('incident1')" class="btn btn-outline text-sm px-3 py-1">查看详情</button>
                        </div>
                    </div>

                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-flask text-blue-600"></i>
                                <span class="font-medium text-gray-800">监测任务</span>
                            </div>
                            <span class="badge badge-info">新任务</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">跃龙街道3个空气质量监测点位需要例行检查</p>
                        <div class="flex space-x-2">
                            <button onclick="navigateToMonitoring('monitor1')" class="btn btn-primary text-sm px-3 py-1">
                                <i class="fas fa-route mr-1"></i>批量导航
                            </button>
                            <button onclick="viewMonitoringDetail('monitor1')" class="btn btn-outline text-sm px-3 py-1">查看列表</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快速上传 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">快速数据上传</h3>
                <div class="card">
                    <div class="grid grid-cols-2 gap-3">
                        <button onclick="uploadPhoto()" class="flex flex-col items-center p-3 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 transition-colors">
                            <i class="fas fa-camera text-2xl text-gray-400 mb-2"></i>
                            <span class="text-sm text-gray-600">拍照上传</span>
                        </button>
                        <button onclick="uploadVideo()" class="flex flex-col items-center p-3 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 transition-colors">
                            <i class="fas fa-video text-2xl text-gray-400 mb-2"></i>
                            <span class="text-sm text-gray-600">视频录制</span>
                        </button>
                        <button onclick="uploadData()" class="flex flex-col items-center p-3 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 transition-colors">
                            <i class="fas fa-chart-line text-2xl text-gray-400 mb-2"></i>
                            <span class="text-sm text-gray-600">监测数据</span>
                        </button>
                        <button onclick="uploadText()" class="flex flex-col items-center p-3 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 transition-colors">
                            <i class="fas fa-edit text-2xl text-gray-400 mb-2"></i>
                            <span class="text-sm text-gray-600">文字报告</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 最近上传记录 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">最近上传</h3>
                <div class="space-y-2">
                    <div class="flex items-center justify-between p-3 bg-white rounded-lg">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-image text-blue-600"></i>
                            <div>
                                <div class="text-sm font-medium">现场照片_001.jpg</div>
                                <div class="text-xs text-gray-500">15分钟前 | 已同步到电脑端</div>
                            </div>
                        </div>
                        <i class="fas fa-check-circle text-green-500"></i>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-white rounded-lg">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-file-alt text-green-600"></i>
                            <div>
                                <div class="text-sm font-medium">监测数据报告.xlsx</div>
                                <div class="text-xs text-gray-500">1小时前 | 已同步到电脑端</div>
                            </div>
                        </div>
                        <i class="fas fa-check-circle text-green-500"></i>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-white rounded-lg">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-video text-purple-600"></i>
                            <div>
                                <div class="text-sm font-medium">现场检查视频.mp4</div>
                                <div class="text-xs text-gray-500">2小时前 | 上传中...</div>
                            </div>
                        </div>
                        <div class="loading"></div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <!-- 弹窗系统 -->
    <!-- 信息查询弹窗 -->
    <div id="queryFunctionModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">信息查询系统</h3>
                <button class="modal-close" onclick="closeModal('queryFunctionModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">污染源库查询</h4>
                        <div class="flex space-x-2 mb-3">
                            <input type="text" placeholder="输入企业名称或统一社会信用代码" class="input flex-1">
                            <button class="btn btn-primary px-4">查询</button>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-3">
                            <div class="text-sm text-gray-600">
                                <div class="font-medium mb-1">浙江某某化工有限公司</div>
                                <div class="grid grid-cols-2 gap-2 text-xs">
                                    <div>行业：化工</div>
                                    <div>级别：重点监管</div>
                                    <div>状态：正常营业</div>
                                    <div>风险等级：高</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">化学品库查询（30000+种）</h4>
                        <div class="flex space-x-2 mb-3">
                            <input type="text" placeholder="输入化学品名称或CAS号" class="input flex-1">
                            <button class="btn btn-primary px-4">查询</button>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-3">
                            <div class="text-sm text-gray-600">
                                <div class="font-medium mb-1">二氧化硫 (SO2)</div>
                                <div class="text-xs space-y-1">
                                    <div>CAS号：7446-09-5</div>
                                    <div>危险性：有毒、腐蚀性</div>
                                    <div>应急措施：立即疏散、通风、防护</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">应急案例库查询</h4>
                        <div class="flex space-x-2 mb-3">
                            <input type="text" placeholder="输入事故类型或关键词" class="input flex-1">
                            <button class="btn btn-primary px-4">查询</button>
                        </div>
                        <div class="space-y-2">
                            <div class="bg-gray-50 rounded-lg p-3">
                                <div class="text-sm">
                                    <div class="font-medium">化工厂废气泄漏应急处置案例</div>
                                    <div class="text-xs text-gray-500 mt-1">包含处置流程、人员疏散、监测布点等</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('queryFunctionModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportQueryData()">导出数据</button>
            </div>
        </div>
    </div>

    <!-- 事故点管理弹窗 -->
    <div id="incidentPointsModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">事故点管理</h3>
                <button class="modal-close" onclick="closeModal('incidentPointsModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="space-y-4">
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-exclamation-triangle text-red-600"></i>
                                <span class="font-medium">新事故点</span>
                            </div>
                            <span class="badge badge-danger">紧急</span>
                        </div>
                        <div class="space-y-2 text-sm">
                            <div><strong>地点：</strong>宁海县某某化工厂</div>
                            <div><strong>坐标：</strong>121.4258°N, 29.2946°E</div>
                            <div><strong>事故类型：</strong>废气泄漏</div>
                            <div><strong>上报时间：</strong>2024-01-15 13:30</div>
                        </div>
                        <div class="mt-3 flex space-x-2">
                            <button onclick="confirmIncident('incident1')" class="btn btn-danger text-sm px-3 py-1">确认事故点</button>
                            <button onclick="navigateToIncident('incident1')" class="btn btn-outline text-sm px-3 py-1">
                                <i class="fas fa-navigation mr-1"></i>导航
                            </button>
                        </div>
                    </div>
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-clock text-yellow-600"></i>
                                <span class="font-medium">处理中事故</span>
                            </div>
                            <span class="badge badge-warning">处理中</span>
                        </div>
                        <div class="space-y-2 text-sm">
                            <div><strong>地点：</strong>宁海县某某印染厂</div>
                            <div><strong>坐标：</strong>121.4289°N, 29.2912°E</div>
                            <div><strong>事故类型：</strong>废水泄漏</div>
                            <div><strong>处理进度：</strong>60%</div>
                        </div>
                        <div class="mt-3 flex space-x-2">
                            <button onclick="viewIncidentDetail('incident2')" class="btn btn-warning text-sm px-3 py-1">查看详情</button>
                            <button onclick="navigateToIncident('incident2')" class="btn btn-outline text-sm px-3 py-1">
                                <i class="fas fa-navigation mr-1"></i>导航
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('incidentPointsModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportIncidentData()">导出数据</button>
            </div>
        </div>
    </div>

    <!-- 监测点位弹窗 -->
    <div id="monitoringPointsModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">监测点位管理</h3>
                <button class="modal-close" onclick="closeModal('monitoringPointsModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="space-y-4">
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-flask text-blue-600"></i>
                                <span class="font-medium">空气质量监测点</span>
                            </div>
                            <span class="badge badge-info">3个点位</span>
                        </div>
                        <div class="space-y-2 text-sm">
                            <div class="flex items-center justify-between">
                                <span>跃龙街道站</span>
                                <button onclick="navigateToPoint('point1')" class="btn btn-primary text-xs px-2 py-1">导航</button>
                            </div>
                            <div class="flex items-center justify-between">
                                <span>桃源街道站</span>
                                <button onclick="navigateToPoint('point2')" class="btn btn-primary text-xs px-2 py-1">导航</button>
                            </div>
                            <div class="flex items-center justify-between">
                                <span>梅林街道站</span>
                                <button onclick="navigateToPoint('point3')" class="btn btn-primary text-xs px-2 py-1">导航</button>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button onclick="batchNavigate()" class="btn btn-info text-sm px-3 py-1 w-full">
                                <i class="fas fa-route mr-1"></i>批量导航
                            </button>
                        </div>
                    </div>
                    <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-tint text-green-600"></i>
                                <span class="font-medium">水质监测点</span>
                            </div>
                            <span class="badge badge-success">2个点位</span>
                        </div>
                        <div class="space-y-2 text-sm">
                            <div class="flex items-center justify-between">
                                <span>宁海某某水库</span>
                                <button onclick="navigateToPoint('water1')" class="btn btn-success text-xs px-2 py-1">导航</button>
                            </div>
                            <div class="flex items-center justify-between">
                                <span>某某河监测断面</span>
                                <button onclick="navigateToPoint('water2')" class="btn btn-success text-xs px-2 py-1">导航</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('monitoringPointsModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportMonitoringData()">导出数据</button>
            </div>
        </div>
    </div>

    <!-- 数据传输弹窗 -->
    <div id="dataTransmissionModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">数据传输</h3>
                <button class="modal-close" onclick="closeModal('dataTransmissionModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">监测数据上传</h4>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="space-y-3">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm">空气质量数据</span>
                                    <button onclick="uploadMonitoringData()" class="btn btn-primary text-xs px-3 py-1">上传</button>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm">水质监测数据</span>
                                    <button onclick="uploadMonitoringData()" class="btn btn-primary text-xs px-3 py-1">上传</button>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm">噪声监测数据</span>
                                    <button onclick="uploadMonitoringData()" class="btn btn-primary text-xs px-3 py-1">上传</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">现场取证</h4>
                        <div class="grid grid-cols-2 gap-3">
                            <button onclick="capturePhoto()" class="flex flex-col items-center p-3 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 transition-colors">
                                <i class="fas fa-camera text-2xl text-gray-400 mb-2"></i>
                                <span class="text-sm text-gray-600">拍照</span>
                            </button>
                            <button onclick="recordVideo()" class="flex flex-col items-center p-3 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 transition-colors">
                                <i class="fas fa-video text-2xl text-gray-400 mb-2"></i>
                                <span class="text-sm text-gray-600">录像</span>
                            </button>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">传输状态</h4>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between p-2 bg-green-50 rounded">
                                <span class="text-sm">空气质量数据</span>
                                <i class="fas fa-check-circle text-green-500"></i>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-yellow-50 rounded">
                                <span class="text-sm">现场照片</span>
                                <div class="flex items-center space-x-2">
                                    <div class="w-4 h-4 border-2 border-yellow-500 border-t-transparent rounded-full animate-spin"></div>
                                    <span class="text-xs text-yellow-600">上传中</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('dataTransmissionModal')">关闭</button>
                <button class="btn btn-primary" onclick="syncAllData()">同步所有数据</button>
            </div>
        </div>
    </div>

    <script>
        function goBack() {
            parent.postMessage({type: 'navigate', page: 'home.html'}, '*');
        }



        // 弹窗显示函数
        function showQueryFunctionModal() {
            document.getElementById('queryFunctionModal').classList.add('show');
        }

        function showIncidentPointsModal() {
            document.getElementById('incidentPointsModal').classList.add('show');
        }

        function showMonitoringPointsModal() {
            document.getElementById('monitoringPointsModal').classList.add('show');
        }

        function showDataTransmissionModal() {
            document.getElementById('dataTransmissionModal').classList.add('show');
        }

        // 弹窗关闭函数
        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('show');
        }

        // 弹窗交互函数
        function exportQueryData() {
            showNotification('正在导出查询数据...', 'success');
        }

        function exportIncidentData() {
            showNotification('正在导出事故点数据...', 'success');
        }

        function syncAllData() {
            showNotification('正在同步所有数据...', 'success');
        }

        // 点击弹窗外部关闭
        document.addEventListener('DOMContentLoaded', function() {
            const modals = document.querySelectorAll('.modal-overlay');
            modals.forEach(modal => {
                modal.addEventListener('click', function(e) {
                    if (e.target === modal) {
                        modal.classList.remove('show');
                    }
                });
            });
        });

        function navigateToIncident(incidentId) {
            showNotification('正在启动导航到事故现场...', 'info');
            setTimeout(() => {
                showNotification('导航已启动，请按照导航指引前往', 'success');
            }, 1500);
        }

        function viewIncidentDetail(incidentId) {
            showNotification('查看事故详细信息', 'info');
        }

        function navigateToMonitoring(monitorId) {
            showNotification('正在规划最优监测路线...', 'info');
        }

        function viewMonitoringDetail(monitorId) {
            showNotification('查看监测任务详情', 'info');
        }

        function confirmIncident(incidentId) {
            showNotification('事故点已确认，信息已同步到指挥中心', 'success');
        }

        function navigateToPoint(pointId) {
            showNotification('正在导航到监测点位...', 'info');
        }

        function batchNavigate() {
            showNotification('正在规划最优路线，请稍候...', 'info');
            setTimeout(() => {
                showNotification('最优路线已生成，预计用时2小时15分钟', 'success');
            }, 2000);
        }

        function uploadPhoto() {
            showNotification('正在打开相机...', 'info');
        }

        function uploadVideo() {
            showNotification('正在启动视频录制...', 'info');
        }

        function uploadData() {
            showNotification('正在准备数据上传界面...', 'info');
        }

        function uploadText() {
            showNotification('正在打开文字编辑器...', 'info');
        }

        function uploadMonitoringData() {
            showNotification('监测数据正在上传...', 'info');
            setTimeout(() => {
                showNotification('数据上传成功，已同步到指挥中心', 'success');
            }, 2000);
        }

        function capturePhoto() {
            showNotification('正在拍照...', 'info');
            setTimeout(() => {
                showNotification('照片已保存，准备上传', 'success');
            }, 1000);
        }

        function recordVideo() {
            showNotification('正在录制视频...', 'info');
        }

        function showNotification(message, type = 'info') {
            const colors = {
                success: 'bg-green-500',
                warning: 'bg-yellow-500',
                danger: 'bg-red-500',
                info: 'bg-blue-500'
            };
            
            const notification = document.createElement('div');
            notification.className = `fixed top-4 left-4 right-4 ${colors[type]} text-white p-3 rounded-lg shadow-lg z-50`;
            notification.innerHTML = `
                <div class="flex items-center">
                    <i class="fas fa-info-circle mr-2"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
    </script>
</body>
</html>